<template>
  <div class="basicAnalysis">
    <div class="main" v-if="hasRoot">
      <div class="title">数据趋势</div>
      <div class="timeTab">
        <p :class="{active:active=='近7天'}" @click="timeTab('近7天')">近7天</p>
        <p :class="{active:active=='30天'}" @click="timeTab('30天')">30天</p>
        <p :class="{active:active=='90天'}" @click="timeTab('90天')">90天</p>
      </div>
      <div class="chartTab marTop0">
        <p :class="{chartActive:trendActive=='销量增长趋势'}" @click="trendActive='销量增长趋势'">销量增长趋势</p>
        <p :class="{chartActive:trendActive=='销售额增长趋势'}" @click="trendActive='销售额增长趋势'">销售额增长趋势</p>
      </div>
      <div class="chart" v-if="trendActive=='销量增长趋势'">
        <van-loading class="loading" v-if="loading" type="spinner" :vertical="true" />
        <KChart
          v-if="volumeX.length&&trendActive=='销量增长趋势'"
          :xData="volumeX"
          :series1="volumeY"
          name1="销量"
          title="销量"
        />
        <div class="no_data" v-if="!volumeX.length && !loading">
          <img src="@/assets/one/zw.png" alt />
          <div class="zw">暂无数据</div>
        </div>
      </div>
      <div class="chart" v-if="trendActive=='销售额增长趋势'">
        <van-loading class="loading" v-if="loading" type="spinner" :vertical="true" />
        <KChart
          v-if="amountX.length&&trendActive=='销售额增长趋势'"
          :xData="amountX"
          :series1="amountY"
          name1="销售额"
          title="销售额"
        />
        <div class="no_data" v-if="!amountX.length && !loading">
          <img src="@/assets/one/zw.png" alt />
          <div class="zw">暂无数据</div>
        </div>
      </div>
      <div class="chartTab">
        <p
          :class="{chartActive:distributionActive=='商品类目分布TOP5'}"
          @click="distributionActive='商品类目分布TOP5'; "
        >商品类目分布TOP5</p>
        <p
          :class="{chartActive:distributionActive=='商品价格区间分布'}"
          @click="distributionActive='商品价格区间分布';"
        >商品价格区间分布</p>
      </div>
      <div class="chart">
        <van-loading class="loading" v-if="loading1" type="spinner" :vertical="true" />
        <van-loading class="loading" v-if="loading2" type="spinner" :vertical="true" />
        <BigPie
          v-if="pie_data01.length && distributionActive=='商品类目分布TOP5'"
          :valueData="pie_data01"
          Etitle="直播商品类目分布"
        />
        <div
          class="no_data"
          v-if="!pie_data01.length && !loading1 && distributionActive=='商品类目分布TOP5'"
        >
          <img src="@/assets/one/zw.png" alt />
          <div class="zw">暂无数据</div>
        </div>

        <BigPie
          v-if="pie_data02.length && distributionActive=='商品价格区间分布'"
          :valueData="pie_data02"
          Etitle="商品价格区间分布"
        />
        <div
          class="no_data"
          v-if="!pie_data02.length && !loading2&& distributionActive=='商品价格区间分布'"
        >
          <img src="@/assets/one/zw.png" alt />
          <div class="zw">暂无数据</div>
        </div>
      </div>
      <div class="chartTab">
        <p :class="{chartActive:Proportion=='达人直播销量占比'}" @click="Proportion='达人直播销量占比'">达人直播销量占比</p>
        <p
          :class="{chartActive:Proportion=='达人行业占比TOP5'}"
          @click="Proportion='达人行业占比TOP5'"
        >达人行业占比TOP5</p>
      </div>
      <div class="chart">
        <van-loading class="loading" v-if="loading3" type="spinner" :vertical="true" />
        <van-loading class="loading" v-if="loading4" type="spinner" :vertical="true" />
        <BigPie
          v-if="pie_data03.length && Proportion=='达人直播销量占比'"
          :valueData="pie_data03"
          Etitle="达人直播销量占比"
        />
        <div class="no_data" v-if="!pie_data03.length && !loading3&& Proportion=='达人直播销量占比'">
          <img src="@/assets/one/zw.png" alt />
          <div class="zw">暂无数据</div>
        </div>
        <BigPie
          v-if="pie_data04.length && Proportion=='达人行业占比TOP5'"
          :valueData="pie_data04"
          Etitle="达人行业占比TOP5"
        />
        <div class="no_data" v-if="!pie_data04.length && !loading4&& Proportion=='达人行业占比TOP5'">
          <img src="@/assets/one/zw.png" alt />
          <div class="zw">暂无数据</div>
        </div>
      </div>
    </div>
    <noPower
      :minLeve="$store.state.userRoot[159][161].ownerMinLevel"
      style="background:#fff;"
      v-else
    />
    <div class="line"></div>
    <!-- <p class="txt">已经到底了哟，电脑登录dy.zsjx114.com查看更多详细数据~</p> -->
  </div>
</template>

<script>
import KChart from '../../talent/talentDetails/EComponents/KChart.vue';
import BigPie from '@/component/BigPie.vue';
export default {
  props: [],
  data() {
    return {
      loading: false,
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      pie_data01: [],
      pie_data02: [],
      pie_data03: [],
      pie_data04: [],
      volumeX: [], //销量
      volumeY: [], //销量
      amountX: [], //销售额
      amountY: [], //销售额
      trendActive: '销量增长趋势',
      Proportion: '达人直播销量占比',
      distributionActive: '商品类目分布TOP5',
      active: '30天',
      startDate: '',
      endDate: '',
      hasRoot: true
    };
  },
  components: { KChart, BigPie },
  computed: {},
  created() {
    this.infodatatrend();
    this.infodatacategory();
    this.infodataprice();
    this.infodataauthorvolume();
    this.infodataauthorindustry();
  },
  mounted() {},
  watch: {},
  methods: {
    timeTab(t) {
      if (this.active != t) {
        this.active = t;
        this.infodatatrend();
        this.infodatacategory();
        this.infodataprice();
        this.infodataauthorvolume();
        this.infodataauthorindustry();
      }
    },

    //小店详情-数据概览-达人行业占比
    infodataauthorindustry() {
      this.loading4 = true;
      this.pie_data04 = [];
      this.getTime();
      this.$axios
        .post('/api/shop/infodataauthorindustry', {
          ShopID: this.$route.query.id, //店铺ID
          BeginTime: this.startDate, //开始时间
          EndTime: this.endDate //结束时间
        })
        .then(res => {
          this.loading4 = false;
          if (res.data.code == 0) {
            this.pie_data04 = res.data.data;
          }
          if (res.data.code == 1003) {
            this.hasRoot = false;
          }
        });
    },
    // 小店详情-数据概览-达人直播销量占比
    infodataauthorvolume() {
      this.loading3 = true;
      this.pie_data03 = [];
      this.getTime();
      this.$axios
        .post('/api/shop/infodataauthorvolume', {
          ShopID: this.$route.query.id, //店铺ID
          BeginTime: this.startDate, //开始时间
          EndTime: this.endDate //结束时间
        })
        .then(res => {
          this.loading3 = false;
          if (res.data.code == 0) {
            let arrData = JSON.parse(JSON.stringify(res.data.data));
            let num = 0;
            for (let i = arrData.length - 1; i >= 0; i--) {
              if (arrData[i].value == 0) {
                arrData.splice(i, 1);
              }
            }
            this.pie_data03 = arrData;
          }
        });
    },
    // 小店详情-数据概览-商品价格分布
    infodataprice() {
      this.pie_data02 = [];
      this.loading2 = true;
      this.getTime();
      this.$axios
        .post('/api/shop/infodataprice', {
          ShopID: this.$route.query.id, //店铺ID
          BeginTime: this.startDate, //开始时间
          EndTime: this.endDate //结束时间
        })
        .then(res => {
          this.loading2 = false;
          if (res.data.code == 0) {
            res.data.data.forEach((element, i) => {
              if (element.value == 0) {
                res.data.data.splice(i, 1);
              }
            });
            this.pie_data02 = res.data.data;
          }
        });
    },
    infodatacategory() {
      this.loading1 = true;
      this.pie_data01 = [];
      this.getTime();
      this.$axios
        .post('/api/shop/infodatacategory', {
          ShopID: this.$route.query.id, //店铺ID
          BeginTime: this.startDate, //开始时间
          EndTime: this.endDate //结束时间
        })
        .then(res => {
          this.loading1 = false;
          if (res.data.code == 0) {
            res.data.data.forEach((element, i) => {
              if (element.value == 0) {
                res.data.data.splice(i, 1);
              }
            });
            this.pie_data01 = res.data.data;
          }
        });
    },
    // 小店详情-数据概览-趋势图
    infodatatrend() {
      this.loading = true;
      this.volumeX = [];
      this.volumeY = [];
      this.amountX = [];
      this.amountY = [];
      this.getTime();
      this.$axios
        .post('/api/shop/infodatatrend', {
          ShopID: this.$route.query.id, //店铺ID
          BeginTime: this.startDate, //开始时间
          EndTime: this.endDate //结束时间
        })
        .then(res => {
          this.loading = false;
          if (res.data.code == 0) {
            this.volumeX = res.data.data.volumeX;
            this.volumeY = res.data.data.volumeY;
            this.amountX = res.data.data.amountX;
            this.amountY = res.data.data.amountY;
          }
        });
    },
    getTime() {
      switch (this.active) {
        case '近7天':
          this.endDate = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 7, 'Y-M-D');
          break;

        case '30天':
          this.endDate = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 30, 'Y-M-D');
          break;
        case '90天':
          this.endDate = this.timestamp(Date.now() / 1000 - 24 * 60 * 60, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 90, 'Y-M-D');
          break;
        default:
          this.startDate = this.liveTime[0];
          this.endDate = this.liveTime[1];
          break;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.basicAnalysis {
  padding-top: 0.706667rem;

  background: #fff;
  .main {
    width: 9.2rem;
    margin: auto;
    .title {
      font-size: 0.4rem;
      color: #222222;
      padding-left: 0.2rem;
      font-weight: 600;
      position: relative;
    }
    .title::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0.1rem;
      display: inline-block;
      width: 0.08rem;
      height: 0.3733rem;
      background-color: #fd7f2c;
      border-radius: 0.1333rem;
    }
  }
  .timeTab {
    background: #fff;
    display: flex;
    height: 1.413333rem;
    align-items: center;
    p {
      text-align: center;
      cursor: pointer;
      width: 1.253333rem;
      height: 0.613333rem;
      line-height: 0.613333rem;
      border: solid 1px #e5e5e5;
      box-sizing: border-box;
      border-radius: 0.053333rem;
      font-size: 0.32rem;
      color: #555555;
      background: #fff;
      margin-right: 0.266667rem;
    }
    .active {
      background-color: #fd7f2c;
      border: solid 1px #fd7f2c;
      border-radius: 4px;
      color: #ffffff;
    }
  }
  .chartTab {
    width: 100%;
    margin-bottom: 0.026667rem;
    display: flex;
    margin-top: 0.666667rem;
    justify-content: space-between;
    p {
      width: 4.506667rem;
      flex: 0 0 4.506667rem;
      height: 0.8rem;
      line-height: 0.8rem;
      box-sizing: border-box;
      background-color: #ffffff;
      border-radius: 0.053333rem;
      border: solid 0.013333rem #e5e5e5;
      font-size: 0.32rem;
      color: #555555;
      text-align: center;
    }
    .chartActive {
      background-color: #fd7f2c;
      border: solid 0.013333rem #fd7f2c;
      color: #fff;
    }
  }
  .chart {
    height: 6.266667rem;
    position: relative;
  }
  .txt {
    text-align: center;
    font-size: 0.32rem;
    line-height: 0.666667rem;

    color: #b5b5b5;
  }
  .marTop0 {
    margin-top: 0 !important;
  }
  .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .no_data {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    img {
      width: 4rem;
      height: 2.8rem;
    }
    .zw {
      font-size: 0.346667rem;
      color: #888888;
    }
  }
}
// 分割线
.line {
  width: 100%;
  height: 0.1866rem;
  background: #f1f1f1;
}
</style>
